import {
	Card,
	Breadcrumb,
	Form,
	Input,
	Select,
	Radio,
	Upload,
	Space,
	Button,
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { useStore } from '@/store'
import { http } from '@/utils'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { Link, useSearchParams } from 'react-router-dom'
import { useState, useRef, useEffect } from 'react'
import './index.scss'
const { Option } = Select
function Publish() {
	const { channelStore } = useStore()
	const [imgCount, setImgCount] = useState(1)
	const [fileList, setFileList] = useState([])
	const fileListRef = useRef([])
	const formRef = useRef()
	const [params] = useSearchParams()
	const articleId = params.get('id')

	//获取详情  编辑
	useEffect(() => {
		async function getArticle() {
			const res = await http.get(`/mp/articles/${articleId}`)
			const { cover, ...formValue } = res.data
			console.log(formValue)
			formRef.current.setFieldsValue({ ...formValue, type: cover.type })
			const imgOldList = cover.images.map((e) => {
				return {
					url: e,
				}
			})
			setFileList(imgOldList)
			fileListRef.current = imgOldList
		}
		if (articleId) {
			// 拉取数据回显
			getArticle()
		}
	}, [articleId])

	const radioChange = (e) => {
		const count = e.target.value
		setImgCount(count)
		//点击切换图片数量  也相应的增删图片暂存仓库
		if (count === 1) {
			//单图 展示第一个
			const fileImg = fileListRef.current[0]
			setFileList(!fileImg ? [] : [fileImg])
		} else if (count === 3) {
			setFileList(fileListRef.current)
		}

		console.log(imgCount)
	}
	const onUploadChange = (info) => {
		const fileList = info.fileList.map((file) => {
			console.log(file)

			if (file.response) {
				return {
					url: file.response.data.url,
				}
			}
			return file
		})
		setFileList(fileList)
		fileListRef.current = fileList
	}
	const onFinish = async (values) => {
		const imgList = fileList.map((e) => e.url)
		const params = {
			...values,
			cover: { images: imgList, type: values.type },
		}
		if (articleId) {
			// 编辑
			await http.put(`/mp/articles/${articleId}?draft=false`, params)
		} else {
			// 新增
			await http.post('/mp/articles?draft=false', params)
		}
	}
	return (
		<div>
			<Card
				title={
					<Breadcrumb separator=">">
						<Breadcrumb.Item>
							<Link to="/">首页</Link>
						</Breadcrumb.Item>
						<Breadcrumb.Item>
							{articleId ? '编辑' : '发布'}文章
						</Breadcrumb.Item>
					</Breadcrumb>
				}
				style={{ marginBottom: 20 }}
			>
				<Form
					ref={formRef}
					labelCol={{ span: 4 }}
					wrapperCol={{ span: 16 }}
					initialValues={{ content: '', type: 1 }}
					onFinish={onFinish}
				>
					<Form.Item
						name="title"
						label="标题"
						rules={[
							{
								required: true,
								message: 'Please input your name',
							},
						]}
					>
						<Input
							placeholder="请输入文章标题"
							style={{ width: 400 }}
						/>
					</Form.Item>
					<Form.Item
						label="频道"
						name="channel_id"
						rules={[
							{
								required: true,
								message: 'Please input your name',
							},
						]}
					>
						<Select
							placeholder="请选择文章频道"
							style={{ width: 400 }}
						>
							{channelStore.channelList.map((channel) => {
								return (
									<Option key={channel.id} value={channel.id}>
										{channel.name}
									</Option>
								)
							})}
						</Select>
					</Form.Item>
					<Form.Item label="封面">
						<Form.Item name="type">
							<Radio.Group onChange={radioChange}>
								<Radio value={1}>单图</Radio>
								<Radio value={3}>三图</Radio>
								<Radio value={0}>无图</Radio>
							</Radio.Group>
						</Form.Item>
						{imgCount > 0 && (
							<Upload
								name="image"
								listType="picture-card"
								className="avatar-uploader"
								showUploadList
								action="http://geek.itheima.net/v1_0/upload"
								maxCount={imgCount}
								fileList={fileList}
								multiple={imgCount === 3}
								onChange={onUploadChange}
							>
								<div style={{ marginTop: 8 }}>
									<PlusOutlined />
								</div>
							</Upload>
						)}
					</Form.Item>
					<Form.Item
						label="内容"
						name="content"
						rules={[{ required: true, message: '请输入文章内容' }]}
					>
						<ReactQuill
							theme="snow"
							className="publish-quill"
							placeholder="请输入文章内容"
						/>
					</Form.Item>

					<Form.Item wrapperCol={{ offset: 4 }}>
						<Space>
							<Button
								size="large"
								type="primary"
								htmlType="submit"
							>
								{articleId ? '编辑' : '发布'}文章
							</Button>
						</Space>
					</Form.Item>
				</Form>
			</Card>
		</div>
	)
}
export default Publish
